<template>
  <div class="base-panel">
    <el-form :model="editForm" size="small" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="串口号" prop="com">
            <el-select
              v-model="editForm.com"
              style="width: 100%"
              @change="changeForm('com')"
            >
              <el-option
                v-for="(item, index) in comList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="波特率" prop="baudRate">
            <el-select
              v-model="editForm.baudRate"
              @change="changeForm('baudRate')"
              style="width: 100%"
            >
              <el-option
                v-for="item in baudRateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据位" prop="dataBits">
            <el-select
              v-model="editForm.dataBits"
              @change="changeForm('dataBits')"
              style="width: 100%"
            >
              <el-option
                v-for="item in dataList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校验位" prop="checkBit">
            <el-select
              v-model="editForm.checkBit"
              @change="changeForm('checkBit')"
              style="width: 100%"
            >
              <el-option
                v-for="item in checkList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停止位" prop="stopBit">
            <el-select
              v-model="editForm.stopBit"
              @change="changeForm('stopBit')"
              style="width: 100%"
            >
              <el-option
                v-for="item in stopList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="读超时" prop="readTimeout">
            <el-input
              v-model="editForm.readTimeout"
              type="number"
              @change="changeForm('readTimeout')"
            >
              <span slot="suffix">ms</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大X轴坐标" prop="maxXAxis">
            <el-input
              v-model="editForm.maxXAxis"
              type="number"
              @change="changeForm('maxXAxis')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="写超时" prop="writeTimeout">
            <el-input
              v-model="editForm.writeTimeout"
              type="number"
              @change="changeForm('writeTimeout')"
            >
              <span slot="suffix">ms</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大Y轴坐标" prop="maxYAxis">
            <el-input
              v-model="editForm.maxYAxis"
              type="number"
              @change="changeForm('maxYAxis')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运行速度" prop="speed">
            <el-input
              v-model="editForm.speed"
              type="number"
              @change="changeForm('speed')"
            >
              <span slot="suffix">ms</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Y轴抬升偏移量" prop="yaxisUp">
            <el-input
              v-model="editForm.yaxisUp"
              type="number"
              @change="changeForm('yaxisUp')"
            >
              <el-button type="primary" slot="append" @click="useAllYaxisUp">
                应用
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "base-config",
  props: {
    cabinetId: {
      type: String,
      default: "",
    },
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
    comList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      editForm: {},
      checkList: [
        { value: 0, label: "无校验(NONE)" },
        { value: 1, label: "奇校验(ODD)" },
        { value: 2, label: "偶校验(EVEN)" },
      ],
      dataList: [
        { value: 5, label: "5" },
        { value: 6, label: "6" },
        { value: 7, label: "7" },
        { value: 8, label: "8" },
      ],
      baudRateList: [
        { value: 1200, label: "1200" },
        { value: 2400, label: "2400" },
        { value: 4800, label: "4800" },
        { value: 9600, label: "9600" },
        { value: 19200, label: "19200" },
        { value: 38400, label: "38400" },
        { value: 57600, label: "57600" },
        { value: 115200, label: "115200" },
      ],
      stopList: [
        { value: 1, label: "1" },
        { value: 2, label: "2" },
      ],
    };
  },
  watch: {
    form: {
      handler(val) {
        this.editForm = { ...val };
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 改变表单
    changeForm(field) {
      this.$emit("changeForm", { field, value: this.editForm[field] });
    },
    // 应用Y轴抬升偏移量
    useAllYaxisUp() {
      this.$emit("useYaxisUp", this.editForm.yaxisUp);
    }
  },
};
</script>
<style lang="scss" scoped>
.base-panel {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #72b5f8;
  box-shadow: inset 0 0 10px rgba(64, 160, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
}
</style>
